<template>
  <div class="box">
    <div class="wrap">
      <div class="wrap__question">
        <span class="wrap__question__text">题目{{ index + 1 }}：</span>
        <span class="wrap__question__input">
          <a-textarea v-model:value="questionsItem.questionTitle" auto-size placeholder="请输入题目" />
        </span>
      </div>
      <div class="wrap__other">
        <div class="wrap__other__type">
          <span class="wrap__other__type__text">题型：</span>
          <TypeSelect @changeQuestionType="changeQuestionType" :questionType="questionsItem.questionType" />
        </div>
        <div class="wrap__other__require">
          <span class="wrap__other__require__text">必答 </span>
          <a-checkbox v-model:checked="questionsItem.is_require" />
        </div>
      </div>
      <template v-if="questionsItem.questionType != 3">
        <div style="padding-top: 20px; font-size: 16.5px">选项：</div>
        <div class="domain">
          <a-form :model="questionsItem.questionOption">
            <a-form-item
              v-for="(domain, index) in questionsItem.questionOption"
              :key="index"
              :rules="{
                required: true,
                message: '选项不能为空',
                trigger: 'blur'
              }"
            >
              <a-input
                v-model:value="questionsItem.questionOption[Number(index)]"
                :placeholder="others && Number(index) + 1 === questionsItem.questionOption.length ? '【其他】选项，该空无需编辑' : '请输入选项'"
                :disabled="others && Number(index) + 1 === questionsItem.questionOption.length ? true : false"
                style="width: 60%; margin-right: 8px"
                autocomplete="off"
              />
              <MinusCircleOutlined v-if="questionsItem.questionOption.length > 2" class="dynamic-delete-button" @click="removeDomain(domain)" />
            </a-form-item>
            <div style="display: flex; width: 60%; height: 17px">
              <a-form-item style="flex: 1; padding-right: 10px">
                <a-button type="dashed" style="width: 100%" @click="addDomain">
                  <PlusOutlined />
                  添加选项
                </a-button>
              </a-form-item>
              <a-form-item style="flex: 1; height: 100%">
                <a-button type="dashed" style="width: 100%" @click="addDomainOther" :disabled="questionsItem.questionOption.length > 1 ? false : true">
                  <PlusOutlined />
                  添加【其他】选项
                </a-button>
              </a-form-item>
            </div>
          </a-form>
        </div>
      </template>
      <div class="wrap__fillTip" v-else>填空题无需编辑选项</div>
      <div style="margin-top: 30px; border-top: 1px solid #c8c8c8">
        <a-form-item style="padding-top: 20px; text-align: center">
          <a-button type="dashed" style="margin-right: 80px; padding: 0 50px" size="large" @click="addQuestion">
            <PlusSquareOutlined />
            添加题目
          </a-button>
          <a-popconfirm title="你确定要删除该问题吗?" ok-text="确定" cancel-text="点错了" @confirm="deleteQuestion(questionsItem.id)">
            <a-button type="dashed" danger ghost style="padding: 0 50px" size="large" :disabled="itemLength > 1 ? false : true">
              <DeleteTwoTone :twoToneColor="itemLength > 1 ? 'red' : '#bbb'" />
              删除题目
            </a-button>
          </a-popconfirm>
        </a-form-item>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { PlusOutlined, MinusCircleOutlined, DeleteTwoTone, PlusSquareOutlined } from '@ant-design/icons-vue'
import { defineComponent, ref } from 'vue'
import TypeSelect from './typeSelect.vue'
import { message } from 'ant-design-vue'

interface Domain {
  value: string
  key: number
}

// 选项相关逻辑
const useDomainEffect = (props: any) => {
  const others = ref<boolean>(false)
  const addDomain = () => {
    if (others.value) {
      message.error('请删除最后一个【其他】选项后再添加')
    } else {
      props.questionsItem.questionOption.push('')
    }
  }
  const addDomainOther = () => {
    if (!others.value) {
      message.info('该选项为填空题')
      others.value = true
      props.questionsItem.questionOption.push('OTHERS')
    } else {
      message.warn('每道题最多只能有1个【其他】选项')
    }
  }
  const removeDomain = (item: Domain) => {
    let index = props.questionsItem.questionOption.indexOf(item)
    if (others.value && props.questionsItem.questionOption.length === 3 && index != props.questionsItem.questionOption.length - 1) {
      message.error('每道题至少要有2个非【其他】选项，请先删除最后一个选项')
    } else {
      if (others.value && index === props.questionsItem.questionOption.length - 1) {
        others.value = false
      }
      if (index !== -1) {
        props.questionsItem.questionOption.splice(index, 1)
      }
    }
  }
  return {
    others,
    addDomain,
    addDomainOther,
    removeDomain
  }
}

// 题目组件其他相关逻辑
const useItemInfoEffect = (props: any) => {
  const changeQuestionType = (questionType: number) => {
    props.questionsItem.questionType = questionType
    if (props.questionsItem.questionType === 3) {
      props.questionsItem.questionOption = []
    } else {
      props.questionsItem.questionOption = ['', '']
    }
  }
  return {
    changeQuestionType
  }
}

//触发父组件事件
const useEmitEffect = (props: any, emit: any) => {
  const addQuestion = () => {
    emit('addQuestion', props.index)
  }
  const deleteQuestion = (itemId: number) => {
    // console.log('itemId',itemId)
    emit('deleteQuestion', props.index, itemId)
  }
  return { addQuestion, deleteQuestion }
}

export default defineComponent({
  props: ['index', 'questionsItem', 'itemId', 'itemLength'],
  emits: ['addQuestion', 'deleteQuestion'],
  components: {
    TypeSelect,
    PlusOutlined,
    MinusCircleOutlined,
    DeleteTwoTone,
    PlusSquareOutlined
  },
  setup(props, { emit }) {
    const { others, addDomain, addDomainOther, removeDomain } = useDomainEffect(props)
    const { changeQuestionType } = useItemInfoEffect(props)
    const { addQuestion, deleteQuestion } = useEmitEffect(props, emit)
    return {
      others,
      addDomain,
      addDomainOther,
      removeDomain,
      addQuestion,
      deleteQuestion,
      changeQuestionType
    }
  }
})
</script>

<style lang="less" scoped>
.wrap {
  border: 1px solid #c8c8c8;
  padding: 20px 60px 0 60px;
  margin-bottom: 20px;
  border-radius: 3px;
  &__question {
    display: flex;
    padding-bottom: 15px;
    align-items: center;
    &__text {
      flex: 1;
      min-width: 80px;
      max-width: 80px;
    }
    &__input {
      flex: 6;
      min-width: 250px;
      max-width: 400px;
    }
  }
  &__other {
    display: flex;
    &__type {
      flex: 1;
      align-items: center;
      min-width: 230px;
      max-width: 250px;
      &__text {
        padding-right: 32px;
      }
    }
    &__require {
      flex: 2;
      display: flex;
      align-items: center;
      &__text {
        margin-right: 10px;
      }
    }
  }
}
.wrap__fillTip {
  color: #999;
  padding-top: 15px;
}
.domain {
  padding: 20px;
}
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
